<template>
  <div class="setting-container">
    <el-card class="clear-form-bottom">
      <div class="font-w" style="display: flex;align-items: flex-end;">
        <span>公寓信息</span>
        <el-icon class="ml20" color="#f6ab2e" @click="handleEdit" style="cursor: pointer;"><Edit /></el-icon>
      </div>
      <el-form :model="apartmentInfo" class="ml20 mt10" style="margin-left: 40px;">
        <el-form-item label="公寓名称">
          <span class="font-w">{{ apartmentInfo.name }}</span>
        </el-form-item>
        <el-form-item label="客服电话">
          <span class="font-w">{{ apartmentInfo.phonenumber }}</span>
        </el-form-item>
        <el-form-item label="所在区域" v-if="apartmentInfo.region">
          <span class="font-w">
            {{ getFullRegionName(apartmentInfo.region) }}
          </span>
        </el-form-item>
        <el-form-item label="详细地址">
          <span class="font-w">{{ apartmentInfo.address }}</span>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="mt20">
      <div class="flex-row-center">
        <span class="font-w">当前公寓发卡状态：网关发卡</span>
        <el-button type="primary" class="ml10">切换酒店发卡</el-button>
      </div>
    </el-card>
    <el-dialog v-model="apartmentVisile" :fullscreen="mobile" width="500px" title="编辑公寓信息" center>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="公寓名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入公寓名称" />
        </el-form-item>
        
        <el-form-item label="所在区域" prop="regionCode">
          <RegionCascader 
            v-model="form.regionCode"
            v-model:regionName="form.regionName"
            placeholder="请选择所在区域"
          />
        </el-form-item>

        <el-form-item label="详细地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入详细地址" />
        </el-form-item>

        <el-form-item label="客服电话" prop="phonenumber">
          <el-input v-model="form.phonenumber" placeholder="请输入客服电话" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button v-if="!isEdit" type="primary" @click="handleSubmit">确定</el-button>
        <el-button v-else @click="handleCancel">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="Apartment">
import { Edit } from '@element-plus/icons-vue'
import useAppStore from '@/store/modules/app'
import apartmentApi from '@/api/room/apartment'
import RegionCascader from '@/components/RegionCascader'

const { proxy } = getCurrentInstance()

const apartmentVisile = ref(false)
const apartmentInfo = ref({})
const data = reactive({
  form: {
    apartmentId: '',
    memberId: '',
    name: '',
    phonenumber: '',
    address: '',
    regionCode: '',
    regionName: ''
  },
  isEdit: true
})

const { form } = toRefs(data)
const mobile = computed(() => useAppStore().device === 'mobile')

const rules = {
  name: [
    { required: true, message: '请输入公寓名称', trigger: 'blur' }
  ],
  regionCode: [
    { required: true, message: '请选择所在区域', trigger: 'change' }
  ],
  address: [
    { required: true, message: '请输入详细地址', trigger: 'blur' }
  ]
}

function handleEdit() {
  apartmentVisile.value = true

  form.value = {
    apartmentId: apartmentInfo.value.apartmentId,
    memberId: apartmentInfo.value.memberId,
    name: apartmentInfo.value.name,
    phonenumber: apartmentInfo.value.phonenumber,
    address: apartmentInfo.value.address,
    regionCode: apartmentInfo.value.regionCode,
    regionName: apartmentInfo.value.regionName
  }
}

function handleCancel() {
  apartmentVisile.value = false
  form.value = {}
}

function handleSubmit() {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      apartmentApi.editApartment(form.value).then(res => {
        proxy.$modal.msgSuccess('编辑成功')
        getApartmentInfo()
        apartmentVisile.value = false
      })
    }
  })
}

/* 获取完整的区域名称 */
function getFullRegionName(region) {
  const names = []
  if (region.provinceName) names.push(region.provinceName)
  if (region.cityName) names.push(region.cityName)
  if (region.districtName) names.push(region.districtName)
  if (region.townName) names.push(region.townName)
  if (region.villageName) names.push(region.villageName)
  return names.join(' / ')
}

/* 获取公寓信息 */
function getApartmentInfo() {
  apartmentApi.getApartmentInfo().then(res => {
    apartmentInfo.value = { ...res.data }
    form.value = {
      apartmentId: res.data.apartmentId,
      memberId: res.data.memberId,
      name: res.data.name,
      phonenumber: res.data.phonenumber,
      address: res.data.address,
      // 如果存在region对象,使用其code
      regionCode: res.data.region?.code || '',
      // 如果存在region对象,使用格式化后的完整名称
      regionName: res.data.region ? getFullRegionName(res.data.region) : ''
    }
  })
}
getApartmentInfo()
</script>
<style lang="scss" scoped>

</style>
